/**活动信息 */
import React, { useState } from 'react';
import { CloseCircleFilled } from '@ant-design/icons';

import styles from './index.less';

const ActiveOption = (props: { selected: any; setSelected: any }) => {
  const { selected, setSelected } = props;
  const activeArr = [
    { title: '报名', id: 1 },
    { title: '投票', id: 2 },
    { title: '门票', id: 3 },
    { title: '签到', id: 4 },
    { title: '抽奖', id: 5 },
  ];
  const checkClick = (id: number) => {
    setSelected([...selected, id]);
  };
  const removeActive = (id: number, e: any) => {
    e.stopPropagation();
    let abc = selected.filter((item: number) => {
      return item !== id;
    });
    setSelected(abc);
  };
  return (
    <div className={styles['content-style']}>
      <div style={{ fontSize: 14, fontWeight: 700, marginBottom: 10 }}>
        选择你想要创建的活动
        <span style={{ fontSize: 10, fontWeight: 200 }}>（可多选）</span>
      </div>
      {activeArr.map((item: any) => (
        <div
          className={
            selected.indexOf(item.id) > -1
              ? styles['active-checked']
              : styles['active-style']
          }
          key={item.id}
          onClick={() => checkClick(item.id)}
        >
          {item.title}
          <CloseCircleFilled
            className={styles['delete-tag']}
            twoToneColor="#fff"
            onClick={(e) => removeActive(item.id, e)}
          />
        </div>
      ))}
    </div>
  );
};
export default ActiveOption;
